<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			/*p{
				width: 30px;
				height: 30px;
				background: blue;
				display: inline-block;
				text-align: center;
				line-height: 30px;
				cursor: pointer;
			}
			input{
				background: pink;
				display: none;
			}
			.current{
				display: block;
			}
			.pink{
				background: pink;
			}*/
			p{
				background: red;
				height: 20px;
				width: 80px;
				display: inline-block;
				cursor: pointer;
			}
			.div1{
				width: 300px;
				height: 300px;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<!--<p class="p01">淡入</p>
			<p class="p02">淡出</p>
			<p class="p03">淡入淡出</p>-->
			
			<p class="p01">上卷</p>
			<p class="p02">下卷</p>
			<p class="p03">下卷上卷</p><br />
			<p class="p04">隐藏</p>
			<p class="p05">展示</p>
			<p class="p06">隐藏展示</p><br />
			<p class="p07">暂停</p>
			<div class="div1" >
				
			</div>
			<!--<p>2</p>
			<p>3</p>
			<input type="text"  value="1" class="current" />
			<input type="text"  value="2" />
			<input type="text"  value="3" />-->
		</div>
	</body>
	<script type="text/javascript">
//		$("p").click(function(){
//			$(this).addClass("pink").siblings().removeClass("pink")
//			// 链式调用  排他
//			$("input").eq($(this).index()).addClass("current").siblings().removeClass("current")
//		})
//         动画分布
//		$("p").click(function(){
//			$("p").animate({"width":"2000px"},2000)
//			.animate({"height":"2000px"},2000)
//			.animate({"font-size":"50px"},2000)
//		})
//   
//		$("p").eq(0).click(function(){
//			$(".div1").fadeIn(2000)
//		})
//		$("p").eq(1).click(function(){
//			$(".div1").fadeOut(2000)
//		})
//		$("p").eq(2).click(function(){
//			$(".div1").fadeToggle(2000)
//		})
		$(".p01").click(function(){
			$(".div1").slideUp(2000)
		})
		$(".p02").click(function(){
			$(".div1").slideDown(2000)
		})
		$(".p03").click(function(){
			$(".div1").slideToggle(2000)
		})
		$(".p04").click(function(){
			$(".div1").hide(2000)
		})
		$(".p05").click(function(){
			$(".div1").show(2000)
		})
		$('.p06').click(function(){
			$('.div1').toggle(2000)
		})
		$(".p07").click(function(){
			$('.div1').stop()
		})
	</script>
</html>
